/* GRAFYNX HUB 1.3 - visual system adapted from supplied FAZGAME Hub SaaS interface.
   GRAFYNX-only navigation, five business modules, isolated pink brand tokens. */
:root{--bg:#fff6fa;--surface:#fff;--ink:#231c22;--muted:#7f7480;--line:#efe1e8;--pink:#ec1779;--pink-soft:#fff0f7;--blue-soft:#edf3fc;--green:#15835b;--green-soft:#eaf7f0;--amber:#986e24;--amber-soft:#fff6e4;--shadow:0 5px 25px rgba(44,20,36,.045);--strong:#24161f;--rail:#b01361;--rail-2:#8f114f;--chip:#faf0f5;font-family:Inter,"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
html[data-theme="dark"]{--bg:#130c11;--surface:#1d141b;--ink:#f8f0f5;--muted:#b9a8b5;--line:#43313c;--pink:#ff5aa3;--pink-soft:#3a1527;--blue-soft:#243143;--green:#65dba7;--green-soft:#18372b;--amber:#eac585;--amber-soft:#40321f;--shadow:0 12px 40px rgba(0,0,0,.18);--strong:#0f0910;--rail:#8d0f50;--rail-2:#5f0b36;--chip:#2a1b25;color-scheme:dark}
body{background:var(--bg);color:var(--ink)} .grafynx-workspace{background:var(--bg);color:var(--ink);min-height:100dvh}
button,input,select,textarea{font-family:inherit}button,a{-webkit-tap-highlight-color:transparent}html{scroll-padding-top:84px} :focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* Desktop SaaS floating rail */
.sidebar{position:fixed;left:16px;top:96px;bottom:auto;width:62px;max-height:calc(100dvh - 120px);background:linear-gradient(180deg,var(--rail) 0%,var(--rail-2) 100%);border:1px solid rgba(255,255,255,.16);border-radius:21px;display:flex;flex-direction:column;gap:10px;padding:10px 7px;z-index:12;box-shadow:0 18px 44px rgba(103,11,58,.28);color:#ffeaf5;transition:width .23s,transform .23s;overflow:hidden}
.sidebar.is-expanded{width:231px;align-items:stretch}.rail-top{display:flex;align-items:center;gap:12px;min-height:42px}.rail-toggle,.nav-tool,.rail-links .nav-link{color:#fff1f8;background:transparent;border:0;cursor:pointer}.rail-toggle{height:42px;width:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:12px}.rail-toggle:hover,.nav-tool:hover,.rail-links .nav-link:hover{background:rgba(255,255,255,.14);color:#fff}.rail-heading{font-size:10px;letter-spacing:.12em;font-weight:800;white-space:nowrap;opacity:0}.rail-heading small{display:block;margin-top:4px;font-size:9px;color:#ffd6e8}.sidebar.is-expanded .rail-heading{opacity:1}.rail-links{display:flex;flex-direction:column;gap:5px;padding:10px 0;min-height:0;overflow:auto;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);scrollbar-width:none}.rail-links::-webkit-scrollbar{display:none}.rail-links .nav-link{display:flex;flex:0 0 auto;align-items:center;min-height:43px;width:46px;padding:11px 12px;margin:0;gap:14px;white-space:nowrap;border-radius:12px;font-size:12px;font-weight:650}.rail-links .nav-link svg{flex-shrink:0}.rail-links .nav-link span{opacity:0;transition:opacity .12s}.rail-links .nav-link.active{color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.rail-links .nav-link.active:before{content:"";height:17px;width:3px;background:#fff;position:absolute;left:1px;border-radius:5px}.sidebar.is-expanded .rail-links .nav-link{width:100%}.sidebar.is-expanded .rail-links .nav-link span{opacity:1}.rail-bottom{display:flex;flex-direction:column;gap:2px}.nav-tool{height:42px;width:46px;min-height:42px;display:flex;align-items:center;gap:14px;text-align:left;padding:10px 12px;border-radius:12px;white-space:nowrap;font-size:12px;font-weight:650}.nav-tool svg{width:19px;flex:none}.nav-tool-text{opacity:0}.sidebar.is-expanded .nav-tool{width:100%}.sidebar.is-expanded .nav-tool-text{opacity:1}.nav-scrim{display:none}
/* Header — brand | section tabs | utility actions */
.main-shell{margin-left:91px;flex:1;min-width:0}.topbar{height:70px;min-height:70px;position:sticky;top:0;z-index:10;display:grid;grid-template-columns:minmax(148px,1fr) auto minmax(185px,1fr);gap:12px;padding:0 clamp(16px,2.8vw,39px);background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:none}.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}.topbar-brand{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;white-space:nowrap}.brand-name{min-width:0;display:flex;flex-direction:column;line-height:1.12}.brand-name strong{font-size:15px;letter-spacing:-.05em;font-weight:850}.brand-name strong span{color:var(--pink)}.brand-name small{display:block;font-size:9px;color:var(--muted);font-weight:550;margin-top:2px}.topbar .brand-symbol{background:#fff;color:#ff5b9c;letter-spacing:0;border-radius:10px;box-shadow:0 6px 16px rgba(236,23,121,.12);border:1px solid rgba(236,23,121,.14)}.top-nav{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;border-radius:28px;background:var(--bg);max-width:min(600px,100%);overflow-x:auto;scrollbar-width:none}.top-nav::-webkit-scrollbar{display:none}.top-nav .nav-link{font-size:11px;padding:10px 14px;border-radius:22px;color:var(--muted);border:0;margin:0;white-space:nowrap;background:transparent;font-weight:650;display:flex;align-items:center;gap:8px}.top-nav .nav-link svg{display:none}.top-nav .nav-link:hover{color:var(--ink);background:var(--chip)}.top-nav .nav-link.active{color:#fff;background:linear-gradient(135deg,var(--pink),#ca115f)}.header-actions{justify-content:flex-end;gap:8px;white-space:nowrap}.search-launch{height:35px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:12px;padding:0 10px;background:var(--surface);color:var(--muted);font-size:11px;cursor:pointer}.search-launch svg{height:15px;width:15px}.search-launch kbd{border:1px solid var(--line);border-radius:5px;padding:3px 5px;font-size:9px;font-family:inherit;color:var(--muted)}.header-actions .icon-button{border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--muted);height:35px;width:35px}.top-create{background:linear-gradient(135deg,var(--pink),#ca115f);border-radius:22px;min-height:36px;padding:8px 13px;box-shadow:0 10px 18px rgba(236,23,121,.2)}.mobile-menu{display:none}.desktop-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;letter-spacing:.04em;padding:20px clamp(16px,2.8vw,39px) 30px}.desktop-foot span:last-child{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FAZGAME-style dashboard content adapted to GRAFYNX */
.main{max-width:1600px;min-height:calc(100dvh - 142px);padding:38px clamp(20px,3.2vw,52px) 28px}.page-head{align-items:flex-end;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:800}.page-head .eyebrow:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;background:#63af8b;border-radius:50%;box-shadow:0 0 0 4px #63af8b20}.page-head h1{font-size:clamp(29px,3vw,42px);font-weight:840;letter-spacing:-.055em;line-height:1.15;margin-top:10px}.page-head h1:after{content:".";color:var(--pink)}.page-head p{line-height:1.6;margin-top:7px;font-size:12px}.btn{border-radius:12px}.btn-primary{background:var(--pink);color:#fff;box-shadow:none}.btn-primary:hover{background:#ca216f}.btn-light{color:var(--ink);background:var(--surface);border-color:var(--line)}.btn-light:hover{background:var(--chip)}.quick-strip{gap:10px;margin-bottom:20px}.quick-strip .btn{background:var(--surface);border-color:var(--line);padding:12px 15px;border-radius:12px;font-weight:650}.grid-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat-card{background:var(--surface);min-height:174px;padding:20px;border-radius:19px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:none}.stat-card:hover{transform:translateY(-3px);border-color:rgba(231,43,133,.27);box-shadow:0 14px 30px #1111}.stat-card:first-child{background:#242527;color:#fff;border-color:#242527}.stat-card:first-child .stat-top,.stat-card:first-child .stat-sub{color:#c7cacc}.stat-card:first-child .stat-icon{background:#ffffff18;color:#ff83b6}.stat-card:after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--pink),transparent);opacity:.38}.stat-card:first-child:after{opacity:1}.stat-top{font-size:11px;font-weight:680;color:var(--muted)}.stat-icon{background:var(--chip);color:var(--ink)}.stat-value{font-size:clamp(22px,2.2vw,33px);font-weight:850;margin-top:23px;letter-spacing:-.055em;overflow-wrap:anywhere;white-space:normal;font-variant-numeric:tabular-nums}.stat-sub{font-size:11px;color:var(--muted)}.stat-card[data-destination]{cursor:pointer}.stat-card[data-destination]:focus-visible{outline:2px solid var(--pink)}.two-col{grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);gap:16px}.panel{padding:24px;border-radius:18px;box-shadow:none}.panel-heading h2{font-size:16px;font-weight:780}.mini-link{color:var(--pink)}.job-mark{background:var(--pink-soft);color:var(--pink)}.job-row{padding:17px 0}.summary-line{color:var(--muted)}.summary-line b{color:var(--ink)}
/* Tables, editor, forms and modal look consistent with reference */
.table-card,.form-card,.empty{background:var(--surface);border-color:var(--line);border-radius:18px;box-shadow:none}.table-card{overflow:hidden}.table-toolbar{margin-top:2px}.searchbox,.select-small,.input,.textarea,.select{background:var(--surface);border-color:var(--line);color:var(--ink)}.input:focus,.select:focus,.textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(231,43,133,.11)}.searchbox input{color:var(--ink)}.table-card th{color:var(--muted);background:var(--chip)}.table-card td{color:var(--ink)}.table-card tr:hover td{background:var(--chip)}.row-sub,.help-copy,.note{color:var(--muted)}.pill.pink{background:var(--pink-soft);color:var(--pink)}.pill.blue{background:var(--blue-soft);color:#537cbf}.pill.green{background:var(--green-soft);color:var(--green)}.pill.orange{background:var(--amber-soft);color:var(--amber)}.form-card{padding:24px}.field label{color:var(--muted)}.bank-entry,.logo-uploader{background:var(--bg);border-color:var(--line)}.modal-layer{background:rgba(10,14,16,.6)}.modal{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px}.modal-head,.modal-footer{border-color:var(--line);background:var(--surface)}.close-btn{background:var(--chip);color:var(--ink)}.modal-body{min-height:0}.modal-body .line-items input{color:var(--ink);background:var(--surface);border-color:var(--line)}.doc-total-line.strong{color:var(--pink)}.auth-view{background:radial-gradient(ellipse at 15% 12%,rgba(231,43,133,.13),transparent 40%),var(--bg)}.auth-card{background:var(--surface)}.auth-art{background:#202325}.auth-art h2 span{color:#ff86b8}.auth-form h1{color:var(--ink)}.auth-warning{color:#a57d32}
/* Mobile bottom dock, retractable navigation drawer, touch optimized cards */
@media(max-width:1390px){.topbar{grid-template-columns:minmax(140px,1fr) auto minmax(145px,1fr)}.top-nav .nav-link{padding:10px 9px}.search-launch kbd,.search-word{display:none}.top-create{padding:9px 11px}}
@media(max-width:1120px){.top-nav{display:none}.topbar{grid-template-columns:minmax(0,1fr) auto}.grid-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:minmax(0,1fr)}.main{padding:32px 26px}}
@media(max-width:800px){.sidebar{top:0;bottom:0;left:0;width:min(285px,85vw)!important;max-height:none;z-index:24;border-radius:0 22px 22px 0;padding:20px 14px;transform:translateX(-110%);box-shadow:none}.sidebar.is-expanded{transform:translateX(0);box-shadow:0 22px 70px #0006}.sidebar .rail-heading,.sidebar .nav-tool-text,.sidebar .rail-links .nav-link span{opacity:1}.sidebar .rail-links .nav-link,.sidebar .nav-tool{width:100%}.rail-links .nav-link.active:before{left:5px}.nav-scrim.is-visible{display:block;position:fixed;inset:0;background:#0008;z-index:23;backdrop-filter:blur(2px)}.main-shell{margin-left:0;width:100%}.topbar{height:66px;min-height:66px;padding:0 15px;gap:8px}.mobile-menu{display:grid;place-items:center;background:var(--chip);border:0;color:var(--ink);border-radius:11px;width:35px;height:35px}.topbar-brand{display:flex}.settings-top{display:none!important}.top-create{min-height:36px;padding:8px 11px}.top-create svg{width:14px}.main{padding:25px 17px 112px;min-height:calc(100dvh - 65px)}.desktop-foot{display:none}.bottom-nav{height:calc(68px + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);display:flex;align-items:stretch;gap:2px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 30px #00000008;position:fixed;bottom:0;left:0;right:0;z-index:13}.bottom-link{height:66px;max-width:160px;font-size:10px;color:var(--muted);font-weight:650;gap:5px;border-radius:0;position:relative}.bottom-link svg{height:20px;width:20px}.bottom-link.active{color:var(--pink)}.bottom-link.active:before{content:"";position:absolute;top:0;left:31%;right:31%;height:3px;background:var(--pink);border-radius:0 0 5px 5px}.toast{bottom:94px}.modal-layer{z-index:30}.settings-wrap{max-width:none}}
@media(max-width:580px){.topbar{padding:0 12px}.header-actions{gap:6px}.theme-top{display:none!important}.topbar-brand .brand-name strong{font-size:13px}.topbar-brand .brand-name small{font-size:8px}.top-create span:not([data-icon]){font-size:11px}.page-head{align-items:flex-start;flex-direction:column;gap:13px}.page-head h1{font-size:29px}.page-head .head-actions{width:100%}.page-head .head-actions .btn{width:100%}.grid-kpis{gap:10px}.stat-card{padding:17px;min-height:139px;border-radius:16px}.stat-icon{width:30px;height:30px}.stat-value{font-size:23px;margin:17px 0 7px}.quick-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.quick-strip .btn{white-space:normal;justify-content:flex-start;min-width:0;padding:10px 11px;font-size:11px}.two-col{gap:12px}.panel{padding:19px}.modal{border-radius:20px 20px 0 0}.modal-head,.modal-body{padding:19px}.modal-body .line-items table{min-width:670px}.table-toolbar{gap:10px}.searchbox{min-width:0}.filter-flex{gap:7px}.form-card{padding:17px}.auth-form{padding:30px 23px}.auth-art{background:#202325}}
/* Actual compact, label-led record cards on phones instead of 680px horizontal tables */
@media(max-width:700px){.table-scroll{overflow:visible}.table-scroll table{min-width:0!important;width:100%}.table-scroll thead{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;overflow:hidden}.table-scroll tbody{display:grid;gap:10px;padding:10px}.table-scroll tbody tr{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px;gap:9px;min-width:0;overflow:hidden}.table-scroll tbody tr[hidden]{display:none!important}.table-scroll tbody td{display:flex;align-items:flex-start;justify-content:space-between;gap:13px;border:0;padding:0;min-width:0;width:100%;font-size:12px;text-align:right;overflow-wrap:anywhere}.table-scroll tbody td:before{content:attr(data-label);font-size:10px;min-width:76px;flex:0 0 76px;color:var(--muted);font-weight:700;text-align:left;padding-top:3px}.table-scroll tbody td:first-child{font-size:13px}.table-scroll tbody td:last-child{border-top:1px solid var(--line);padding-top:10px;justify-content:flex-end}.table-scroll tbody td:last-child:before{content:none}.table-scroll tbody td .row-sub{white-space:normal}.table-scroll tbody td .pill{margin-left:auto}.table-scroll tbody tr:hover td{background:transparent}.table-card{border:0;background:transparent}.table-toolbar{flex-wrap:wrap}.table-toolbar .searchbox{flex:1 1 100%}.table-toolbar .filter-flex{width:100%;justify-content:space-between}.finance-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.finance-head .stat-card{min-width:0}.finance-head .stat-card:last-child{grid-column:1/-1}}
/* Command search panel */
.command-backdrop{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:clamp(40px,12vh,150px) 16px 20px;background:rgba(9,12,14,.56);z-index:40;backdrop-filter:blur(4px)}.command-dialog{width:min(565px,100%);max-height:min(74vh,650px);background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:0 30px 80px #0004;display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}.command-head{display:flex;gap:10px;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line)}.command-head svg{width:18px;flex-shrink:0;color:var(--muted)}.command-head input{border:0;outline:none;box-shadow:none;background:transparent;color:var(--ink);font-size:15px;flex:1;min-width:0}.command-head button{border:0;background:var(--chip);color:var(--muted);font-size:10px;border-radius:6px;padding:5px 8px}.command-list{overflow:auto;padding:10px}.command-group{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;padding:10px 12px}.command-item{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;padding:12px;font-size:12px;cursor:pointer}.command-item:hover,.command-item:focus{background:var(--chip)}.command-item svg{color:var(--pink);flex:none}.command-item span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-item small{color:var(--muted);font-size:10px}.command-noresults{text-align:center;padding:36px 20px;color:var(--muted);font-size:12px}
@media(prefers-reduced-motion:reduce){.sidebar,.stat-card{transition:none!important}}

/* Avoid duplicate Create Job calls-to-action on the dashboard. */
.main[data-page="dashboard"] .page-head .head-actions{display:none}
@media(max-width:800px){.main[data-page="dashboard"] .page-head .head-actions{display:flex}.grafynx-workspace:has(.main[data-page="dashboard"]) .top-create{display:none}}

/* V1.6 — document actions are visible, tappable and themed on all screen sizes. */
.doc-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
.doc-row-actions :is(button,a){display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);text-decoration:none;cursor:pointer;transition:background .16s,color .16s,transform .16s}
.doc-row-actions :is(button,a):hover{background:var(--pink-soft);color:var(--pink);transform:translateY(-1px)}
.doc-row-actions :is(button,a):focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.doc-row-actions svg{width:17px;height:17px}
@media(max-width:700px){.doc-row-actions{gap:8px;width:100%;justify-content:flex-end}.doc-row-actions :is(button,a){width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){.doc-row-actions :is(button,a){transition:none}}

.brand-mark{display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}.topbar .brand-symbol.brand-mark img{width:88%;height:88%}.auth-art .brand-symbol.brand-mark{background:#fff;padding:5px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.12)}.auth-art .brand-symbol.brand-mark img{width:100%;height:100%;object-fit:contain}.sidebar .rail-top{padding-right:4px}.sidebar.is-expanded .rail-heading{color:#fff7fb}