/* Wateen Admin STAGING 655 — mobile polish for Studio Brands 654; Git-linked */
@media (max-width:760px){
  .b654box{padding:12px;border-radius:14px;margin-bottom:16px;overflow:hidden}
  .b654grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:12px}
  .b654grid .full{grid-column:auto}
  .b654grid label{display:block;min-width:0;font-size:11px;line-height:1.45;font-weight:900}
  .b654grid input:not([type="checkbox"]),
  .b654grid select,
  .b654grid textarea{display:block;width:100%;max-width:100%;min-width:0;margin-top:5px;padding:11px 12px;border-radius:11px;font-size:14px;line-height:1.35}
  .b654grid textarea{min-height:92px;resize:vertical}
  .b654grid .check{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;margin:0;border-radius:11px}
  .b654grid .check input[type="checkbox"]{display:inline-block;width:18px;height:18px;min-width:18px;margin:0;padding:0;accent-color:var(--b)}
  .b654grid .check span{min-width:0}
  .b654box>.primary{width:100%;min-height:44px;padding:11px 14px;font-size:14px}
  .b654head{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin:16px 0 10px}
  .b654head>b{font-size:14px}
  .b654head>.primary{min-height:40px;padding:9px 12px;font-size:13px}
  .b654r{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:start;margin:10px 0;padding:12px;border-radius:14px;background:#fff;overflow:hidden}
  .b654logo{width:48px;height:48px;border-radius:11px;grid-row:1}
  .b654r>div:nth-child(2){min-width:0;overflow:hidden}
  .b654r>div:nth-child(2)>b{display:block;max-width:100%;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
  .b654r small{display:block;max-width:100%;margin:4px 0 7px;font-size:10px;line-height:1.55;overflow-wrap:anywhere;word-break:break-word;unicode-bidi:plaintext}
  .b654r .badge{font-size:9px;margin:0 0 3px 3px}
  .b654a{grid-column:1/-1;display:grid;grid-template-columns:42px 42px minmax(0,1fr) minmax(0,1fr);gap:7px;width:100%;margin-top:2px}
  .b654a button{width:100%;min-width:0;min-height:40px;padding:8px 6px;border-radius:10px;font-size:12px;line-height:1.2;white-space:normal}
  .b654search{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px}
  .b654search input{width:100%;min-width:0;padding:12px 13px;font-size:15px;border:1px solid var(--line);border-radius:12px;background:#fff}
  .b654search button{width:100%;min-height:44px;border-radius:12px;font-size:14px}
  #bc654{display:block;margin:2px 2px 8px;font-size:10px;line-height:1.4}
  .b654plist{display:grid;gap:8px;max-height:52vh;overflow:auto;padding:2px 1px 8px;overscroll-behavior:contain}
  .b654p{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;width:100%;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;direction:rtl;text-align:right;box-shadow:0 2px 8px #00000008}
  .b654p input[type="checkbox"]{width:20px;height:20px;min-width:20px;margin:1px 0 0;accent-color:var(--b)}
  .b654p>div{min-width:0;overflow:hidden}
  .b654p b{display:block;min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;word-break:normal}
  .b654p small{display:block;min-width:0;margin-top:4px;font-size:9px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;word-break:break-word;unicode-bidi:plaintext}
  .modalFoot button:disabled,.actions button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.15)}
}
@media (max-width:420px){
  .b654r{grid-template-columns:44px minmax(0,1fr);padding:10px;gap:9px}
  .b654logo{width:44px;height:44px}
  .b654a{grid-template-columns:40px 40px minmax(0,1fr) minmax(0,1fr);gap:6px}
  .b654a button{font-size:11px;padding:7px 4px}
  .b654head>.primary{width:100%}
  .b654p{grid-template-columns:22px minmax(0,1fr);padding:10px;gap:9px}
  .b654p input[type="checkbox"]{width:19px;height:19px;min-width:19px}
  .b654p b{font-size:12px}
}

/* WATEEN_ADMIN_VISUAL_IDENTITY_STAGE=1 — approved visual identity, staging only */
:root{
  --b:#ff3b4a;
  --b2:#ff747d;
  --ink:#17353d;
  --muted:#7a8b90;
  --line:#e3ebed;
  --bg:#f7fafb;
  --card:#fff;
  --nav:#083f4d;
  --green:#238653;
  --orange:#ad690c;
  --red:#b8394d;
  --w-teal:#0b5e72;
  --w-teal-2:#083f4d;
  --w-coral:#ff747d;
  --shadow:0 10px 30px rgba(8,63,77,.07)
}
html,body{background:radial-gradient(circle at -6% 16%,rgba(255,116,125,.10) 0 150px,transparent 152px),radial-gradient(circle at 106% 62%,rgba(11,94,114,.08) 0 190px,transparent 192px),var(--bg);color:var(--ink)}
::selection{background:rgba(255,59,74,.18);color:var(--w-teal-2)}
.stage{background:linear-gradient(90deg,#071f27,#0b5e72 48%,#071f27);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.login{background:radial-gradient(circle at 12% 18%,rgba(255,116,125,.13) 0 120px,transparent 122px),radial-gradient(circle at 88% 82%,rgba(11,94,114,.10) 0 160px,transparent 162px),linear-gradient(145deg,#fbfdfd,#fff7f8)}
.loginCard{position:relative;overflow:hidden;border:1px solid rgba(11,94,114,.12);border-radius:28px;padding:30px;box-shadow:0 24px 70px rgba(8,63,77,.13)}
.loginCard:before,.loginCard:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.loginCard:before{width:150px;height:150px;border:18px solid rgba(255,116,125,.10);left:-92px;top:-88px}.loginCard:after{width:170px;height:170px;border:20px solid rgba(11,94,114,.08);right:-105px;bottom:-108px}
.mark{position:relative;z-index:1;width:78px;height:78px;border-radius:24px;background:#fff url('https://staging.wateenstore.online/wateen-brand-mark.webp') center/contain no-repeat!important;color:transparent!important;box-shadow:0 12px 30px rgba(8,63,77,.13);border:1px solid rgba(11,94,114,.08)}
.login h1{color:var(--w-teal-2);font-size:25px}.login p{color:var(--muted);font-size:12px}
.field label{color:#4c6268}.field input,.field select,.field textarea{border-color:#dfe8ea;border-radius:12px;transition:.18s}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(11,94,114,.5);box-shadow:0 0 0 4px rgba(11,94,114,.10)}
.primary{background:linear-gradient(135deg,var(--b),#f32649 55%,var(--w-coral));box-shadow:0 8px 20px rgba(255,59,74,.15);transition:.18s}.primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 25px rgba(255,59,74,.22)}
.secondary{border-color:#dfe8ea;color:var(--w-teal);transition:.18s}.secondary:not(:disabled):hover{background:#f2f8f9;border-color:rgba(11,94,114,.22)}
.side{background:radial-gradient(circle at 18% 8%,rgba(255,116,125,.14) 0 75px,transparent 77px),linear-gradient(180deg,#083f4d 0%,#062e38 58%,#051f27 100%);box-shadow:-8px 0 28px rgba(8,63,77,.12)}
.brand{position:relative;padding:7px 8px 22px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}.brandIcon{width:48px;height:48px;border-radius:16px;background:#fff url('https://staging.wateenstore.online/wateen-brand-mark.webp') center/contain no-repeat!important;color:transparent!important;box-shadow:0 8px 20px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12)}
.brand b{font-size:16px;color:#fff}.brand small{color:#9dc2ca;font-size:9px;margin-top:3px}.navTitle{color:#7eabb4;font-size:9px;padding-top:13px}.nav{color:#b8ccd1;border:1px solid transparent;transition:.17s}.nav:hover{background:rgba(255,255,255,.07);color:#fff}.nav.on{background:linear-gradient(135deg,rgba(255,59,74,.22),rgba(255,116,125,.08));color:#fff;border-color:rgba(255,116,125,.20);box-shadow:inset 3px 0 0 var(--b)}.sideFoot{border-top:1px solid rgba(255,255,255,.08);padding-top:9px}
.main{background:transparent}.top{background:rgba(247,250,251,.90);backdrop-filter:blur(18px);border-color:rgba(11,94,114,.10);box-shadow:0 4px 18px rgba(8,63,77,.035)}.top b{color:var(--w-teal-2);font-size:16px}
.content{padding:24px}.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff,#fbfefe 70%,#fff5f6);border:1px solid rgba(11,94,114,.10);border-radius:21px;padding:18px 20px;box-shadow:var(--shadow);align-items:center;margin-bottom:16px}.hero:before{content:"";position:absolute;width:125px;height:125px;border:16px solid rgba(255,116,125,.10);border-radius:50%;left:-78px;top:-78px;pointer-events:none}.hero h1{color:var(--w-teal-2);font-size:27px}.hero p{color:var(--muted);font-size:11px}.phase{border-color:rgba(11,94,114,.13);background:#f2f8f9;color:var(--w-teal);box-shadow:0 3px 10px rgba(8,63,77,.04)}
.metrics{gap:12px}.metric{position:relative;overflow:hidden;border-color:#e3ebed;border-radius:18px;padding:16px;box-shadow:0 8px 24px rgba(8,63,77,.05)}.metric:after{content:"";position:absolute;width:52px;height:52px;border-radius:50%;left:-25px;bottom:-28px;background:rgba(255,116,125,.09)}.metric small{color:#829398}.metric b{color:var(--w-teal-2)}
.panel,.hrPanel,.d3card,.d4cat,.d5row,.s652slide,.sec,.b654box,.b654r,.b654p{border-color:#e2eaec!important;border-radius:18px!important;box-shadow:0 7px 22px rgba(8,63,77,.045)}
.toolbar,.hrToolbar,.hrTabs{border-color:#e3ebed;background:#fff}.search{background:#f8fbfc;border-color:#dfe8ea}.search:focus-within{border-color:rgba(11,94,114,.36);box-shadow:0 0 0 3px rgba(11,94,114,.08)}.toolbar select{border-color:#dfe8ea;color:#40575d}
.meta{color:#7b8d92}.meta b{color:var(--w-teal-2)}.tbl th{background:#f5f9fa;color:#71878d;border-color:#e4ecee}.tbl td{border-color:#edf2f3}.tbl tbody tr:hover{background:#fbfefe}.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 rgba(255,59,74,.30)}
.prodPic,.staffAvatar,.d4icon,.d5preview,.mediaMainPreview,.mediaCard img,.b654logo{background:linear-gradient(145deg,#fff7f8,#f3f9fa)!important;border-color:#e2eaec!important}.staffAvatar{color:var(--b)}
.card{background:#fff;border-color:#e2eaec;border-radius:16px;box-shadow:0 6px 18px rgba(8,63,77,.04)}.mini,.info{background:#f7fafb}.blue{background:#eef7f9;color:#0b5e72}.pink{background:#fff1f3;color:#b8394d}
.drawer,.modal{border-radius:24px 0 0 24px}.modal{border-radius:23px}.drawerHead,.modalHead,.modalFoot{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-color:#e2eaec}.drawerHead h2,.modalHead h2{color:var(--w-teal-2)}
.sec{background:#fff}.sec h3{color:#264850}.check{border-color:#e2eaec;background:#fbfdfd}.check:hover{border-color:rgba(11,94,114,.22);background:#f6fbfc}.check input{accent-color:var(--b)}.note,.foundationNote,.d4note,.d5hint,.d6instruction,.d65warn{border-color:#d8e8eb!important;background:#f5fafb!important;color:#45656d!important}
.importDrop{border-color:#b9d5db;background:#f7fbfc}.importStat{border-color:#e3ebed}.importPreview{border-color:#e3ebed}.seoBox{border-color:#e7dfe2;background:#fffbfc}.seoScore{background:linear-gradient(135deg,#fff4f5,#f6fbfc)}.seoScore b{color:var(--b)}
.hrTabs button.on,.d4tabs button.on{background:linear-gradient(135deg,var(--w-teal-2),var(--w-teal));border-color:transparent}.hrClock{background:linear-gradient(145deg,#fff6f7,#fbfefe);border-color:#f0dfe2}.hrPayslip .total{color:var(--b)}
.d65bar{border-color:#d8e8eb;background:linear-gradient(135deg,#f6fbfc,#fff7f8)}.d65chip{border-color:#dfe8ea}.d6handle,.s652handle{border-color:#c8d8dc;background:#f6fafb;color:var(--w-teal)}.toast{background:#062f39;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.bottom{background:rgba(255,255,255,.95);border-color:#dfe8ea;box-shadow:0 -8px 24px rgba(8,63,77,.07)}.bottom button{color:#8a9ba0}.bottom button.on{color:var(--b)}
@media(max-width:760px){.content{padding:14px 10px}.hero{border-radius:18px;padding:15px}.hero h1{font-size:23px}.top{background:rgba(247,250,251,.96)}.modal{border-radius:23px 23px 0 0}.loginCard{padding:24px}.mark{width:70px;height:70px}.metric{border-radius:16px}.card{border-radius:15px}}